<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/utils/rem.js"></script>
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_2124975_ogwnuct6mbe.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/9.2.4/swiper-bundle.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/page/detail.css">
    <style>
        body {}

        .content {
            height: 100%;
            height: calc(100vh);
            overflow-y: scroll;

        }

        .content img {
            height: 13.34rem;
            width: 7.5rem;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div class="content">

    </div>

</body>
<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/9.2.4/swiper-bundle.min.js"></script>
<script src="../js/config/index.js"></script>
<script src="../js/http/index.js"></script>
<script src="../js/serve/index.js"></script>
<script src="../js/utils/index.js"></script>
<script>
    class Info {
        inex = [[]];
        index = 1;

        constructor() {
            let t
            if (getItem("like").length == 0) {
                t = '<i class="iconfont icon-xin Love"></i>'
            } else {
                console.log(getItem("like"))


                try {
                    getItem("like").forEach((v) => {

                        if (v.id == query("id")) {
                            t = '<i class="iconfont icon-aixin Love"></i>'
                            throw new Error("第三");
                        } else {
                            t = '<i class="iconfont icon-xin Love"></i>'
                        }
                    })
                } catch (e) {
                    if (e.message != "第三") throw e;
                };


            }

            console.log(t)
            header(query("title"), t)
            this.detail()
            this.Love()

        }
        
        async detail() {
            console.log(query("quantity"), query("id"))
            let info = await indexserve.info({
                id: query("id"),
                quantity: query("quantity")
            })
            console.log(info)
            info.result.forEach((v, i) => {

                if (i == (10 * this.index) - 1) {
                    this.inex[(this.index - 1)].push(v)
                    this.index += 1;

                    this.inex.push([])
                } else {
                    this.inex[(this.index - 1)].push(v)
                }
            });
            //滑动数组下标
            this.indexs = 0;

            this.xunhuan()
            $(".content").onscroll = (v) => {

                const { clientHeight, scrollHeight, scrollTop } = $(".content");

                let distance = scrollHeight - scrollTop - clientHeight;
                console.log(distance)
                if (distance <= 1) {
                    if (this.indexs < this.index - 1) {
                        this.indexs += 1;
                        this.xunhuan()
                    } else {
                        alert(1)
                    }
                } else {

                }
            }
        }
        dd = 0;
        xunhuan() {
            this.inex[this.indexs].forEach(v => {
                $(".content").html(`
                       <img src=${v} alt="${this.dd += 1}">
                `)
            })
        }
        
        Love() {

            $(".Love").tap(({ v, i }) => {
                let ty = false;
                if (getItem("like").length == 0) {
                    //没有查到添加进 like 
                   
                    this.Love1();
                } else {
                    console.log(getItem("like"))
                    //查询是否存在
                    try {
                        getItem("like").forEach((c, i) => {
                            if (c.id == query("id")) {
                                let ssd = getItem("like").filter(item => item.id != query("id"))
                                setItem("like", ssd)
                                console.log(1)
                                $(".Love").removeClass("icon-aixin").appClass("icon-xin")
                                ty = true
                            }
                        })
                    } catch (e) {
                        if (e.message != "第三") throw e;
                    };
                   
                    if (ty == false) {
                        this.Love1();
                        console.log(2)
                    }
                }


            })
        }


        //添加收藏
        Love1() {
            //没有查到添加进 like 
            let sss = {
                id: query("id"),
                quantity: query("quantity"),
                title: query("title"),
                img_src: query("img_src"),
            }
            let ddd = getItem("like")
            ddd.push(sss)
            setItem("like", ddd)
            ddd = null
            $(".Love").removeClass("icon-xin").appClass("icon-aixin")
        }
    }
    new Info()
</script>

</html>